<template>
  <div class="user-count-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title">
        <i class="el-icon-user"></i>
        用户数量统计
      </h2>
      <p class="page-description">查看您锁定的用户数量统计信息</p>
    </div>

    <!-- 用户数量统计卡片 -->
    <div class="stats-cards">
      <el-row :gutter="20">
        <!-- 当前锁定用户数量 -->
        <el-col :span="8">
          <el-card class="stats-card">
            <div class="card-content">
              <div class="card-icon">
                <i class="el-icon-user-solid"></i>
              </div>
              <div class="card-info">
                <div class="card-title">当前锁定用户</div>
                <div class="card-value">{{ userCountData.lockNum || 0 }}</div>
                <div class="card-unit">人</div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 用户数量上限 -->
        <el-col :span="8">
          <el-card class="stats-card">
            <div class="card-content">
              <div class="card-icon limit-icon">
                <i class="el-icon-s-data"></i>
              </div>
              <div class="card-info">
                <div class="card-title">用户数量上限</div>
                <div class="card-value">{{ userCountData.lockNumLimit || 0 }}</div>
                <div class="card-unit">人</div>
              </div>
            </div>
          </el-card>
        </el-col>

        <!-- 使用率 -->
        <el-col :span="8">
          <el-card class="stats-card">
            <div class="card-content">
              <div class="card-icon usage-icon">
                <i class="el-icon-pie-chart"></i>
              </div>
              <div class="card-info">
                <div class="card-title">使用率</div>
                <div class="card-value">{{ usageRate }}%</div>
                <div class="card-unit">
                  <el-progress
                    :percentage="usageRate"
                    :color="getUsageColor(usageRate)"
                    :show-text="false"
                    :stroke-width="6">
                  </el-progress>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 详细信息 -->
    <div class="detail-section">
      <el-card>
        <div slot="header" class="card-header">
          <span>详细信息</span>
          <el-button
            type="primary"
            icon="el-icon-refresh"
            size="small"
            @click="loadUserCountData">
            刷新数据
          </el-button>
        </div>

        <el-descriptions :column="2" border>
          <el-descriptions-item label="商家名称">
            {{ userCountData.name || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="商家电话">
            {{ userCountData.phone || '-' }}
          </el-descriptions-item>
          <el-descriptions-item label="当前锁定用户数量">
            <el-tag type="primary" size="medium">
              {{ userCountData.lockNum || 0 }} 人
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="用户数量上限">
            <el-tag type="info" size="medium">
              {{ userCountData.lockNumLimit || 0 }} 人
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="剩余容量">
            <el-tag :type="getRemainingCapacityType()" size="medium">
              {{ remainingCapacity }} 人
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="使用率">
            <el-tag :type="getUsageRateType()" size="medium">
              {{ usageRate }}%
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>

    <!-- 使用率图表 -->
    <div class="chart-section">
      <el-card>
        <div slot="header" class="card-header">
          <span>使用率趋势</span>
        </div>
        <div class="chart-container">
          <div class="usage-chart">
            <div class="chart-circle">
              <div class="circle-progress" :style="circleStyle">
                <div class="circle-text">
                  <div class="percentage">{{ usageRate }}%</div>
                  <div class="label">使用率</div>
                </div>
              </div>
            </div>
            <div class="chart-legend">
              <div class="legend-item">
                <div class="legend-color used"></div>
                <span>已使用: {{ userCountData.lockNum || 0 }} 人</span>
              </div>
              <div class="legend-item">
                <div class="legend-color available"></div>
                <span>剩余: {{ remainingCapacity }} 人</span>
              </div>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getCurrentMerchantUserCount } from '@/api/merchant/user-count'

export default {
  name: 'UserCount',
  data() {
    return {
      loading: false,
      userCountData: {
        lockNum: 0,        // 当前锁定用户数量
        lockNumLimit: 0,   // 用户数量上限
        name: '',          // 商家名称
        phone: ''          // 商家电话
      }
    }
  },
  computed: {
    // 计算使用率
    usageRate() {
      if (!this.userCountData.lockNumLimit || this.userCountData.lockNumLimit === 0) {
        return 0
      }
      return Math.round((this.userCountData.lockNum / this.userCountData.lockNumLimit) * 100)
    },

    // 计算剩余容量
    remainingCapacity() {
      return Math.max(0, (this.userCountData.lockNumLimit || 0) - (this.userCountData.lockNum || 0))
    },

    // 圆形进度条样式
    circleStyle() {
      const percentage = this.usageRate
      const color = this.getUsageColor(percentage)
      return {
        background: `conic-gradient(${color} ${percentage * 3.6}deg, #f0f0f0 ${percentage * 3.6}deg)`
      }
    }
  },
  mounted() {
    this.loadUserCountData()
  },
  methods: {
    // 加载用户数量数据
    async loadUserCountData() {
      this.loading = true
      try {
        Logger.log('=== 加载商家用户数量数据 ===')

        const response = await getCurrentMerchantUserCount()
        Logger.log('用户数量数据响应:', response.data)

        if (response.code === 0 && response.data) {
          this.userCountData = {
            lockNum: response.data.lockNum || 0,
            lockNumLimit: response.data.lockNumLimit || 0,
            name: response.data.name || '',
            phone: response.data.phone || ''
          }
          Logger.log('用户数量数据:', this.userCountData)
        } else {
          Logger.log('未获取到用户数量数据')
          this.$message.warning('未获取到用户数量数据')
        }
      } catch (error) {
        Logger.error('加载用户数量数据失败:', error)
        this.$message.error('加载用户数量数据失败，请重试')
      } finally {
        this.loading = false
      }
    },

    // 获取使用率颜色
    getUsageColor(percentage) {
      if (percentage >= 90) return '#f56c6c'  // 红色 - 接近上限
      if (percentage >= 70) return '#e6a23c'  // 橙色 - 较高使用率
      if (percentage >= 50) return '#409eff'  // 蓝色 - 中等使用率
      return '#67c23a'  // 绿色 - 低使用率
    },

    // 获取剩余容量标签类型
    getRemainingCapacityType() {
      const remaining = this.remainingCapacity
      if (remaining === 0) return 'danger'
      if (remaining <= 10) return 'warning'
      return 'success'
    },

    // 获取使用率标签类型
    getUsageRateType() {
      const rate = this.usageRate
      if (rate >= 90) return 'danger'
      if (rate >= 70) return 'warning'
      if (rate >= 50) return 'primary'
      return 'success'
    }
  }
}
</script>

<style scoped>
.user-count-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 20px;
}

.page-title {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 24px;
  font-weight: 600;
}

.page-description {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.stats-cards {
  margin-bottom: 20px;
}

.stats-card {
  height: 120px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.stats-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
}

.card-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  font-size: 24px;
  color: white;
  background: linear-gradient(135deg, #409eff, #67c23a);
}

.limit-icon {
  background: linear-gradient(135deg, #e6a23c, #f56c6c);
}

.usage-icon {
  background: linear-gradient(135deg, #909399, #606266);
}

.card-info {
  flex: 1;
}

.card-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.card-value {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.card-unit {
  font-size: 12px;
  color: #909399;
}

.detail-section {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chart-section {
  margin-bottom: 20px;
}

.chart-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.usage-chart {
  display: flex;
  align-items: center;
  gap: 40px;
}

.chart-circle {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-progress {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circle-progress::before {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  background: white;
  border-radius: 50%;
}

.circle-text {
  position: relative;
  z-index: 1;
  text-align: center;
}

.percentage {
  font-size: 32px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
}

.label {
  font-size: 14px;
  color: #909399;
}

.chart-legend {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #606266;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-color.used {
  background-color: #409eff;
}

.legend-color.available {
  background-color: #f0f0f0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-cards .el-col {
    margin-bottom: 16px;
  }

  .usage-chart {
    flex-direction: column;
    gap: 20px;
  }

  .chart-circle {
    width: 150px;
    height: 150px;
  }

  .percentage {
    font-size: 24px;
  }
}
</style>
